<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<link rel="stylesheet" href="${ctx}/css/sapar.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/sapar.js"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/mask.js"></script>
<title>问卷增加</title>
<style type="text/css">
	.table-box input[type=text]  {
	  width: 150px;
	  height: 28px;
	  border-width: 1px;
	  border-style: solid;
	  border-left-color: #c5c5c5;
	  border-top-color: #c5c5c5;
	  border-right-color: #e0e0e0;
	  border-bottom-color: #e0e0e0;
	  *line-height: 28px;
	  outline: none;
	  /* background:url(../img/skin_/inputbg.png);*/
	  padding: 0 10px;
	}
	#datiType{
	height:28px;
	}
	.table-box .iselect-wrapper{
		float: left;
		margin-right: 5px;
		width: 150px;
	}
	
	.table-box .iselect-wrapper .iselect{
		width:150px;
	}
</style>
</head>

<body>
<div id="mask" class="mask"></div>
    <div id="saper-container">
        <div id="saper-hd"></div>
        <div id="saper-bd">
            <div class="subfiled clearfix">
                <h2>问卷新增</h2>
            </div>
            <form class="saper-form" id="dataForm" >
            <div class="subfiled-content">
                <div class="search-box clearfix">
                    <div class="kv-item clearfix">
                        <label><span class="impInfo">*</span>问卷名称：</label>
                        <div class="kv-item-content">
                            <input type="text" placeholder="问卷名称" name="wenjuanName" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"/>
                        </div>
                    </div>
                    <div class="kv-item clearfix">
                        <label><span class="impInfo">*</span>科室名称：</label>
                        <div class="kv-item-content">
                             <select name="wenjuanKeshi" onchange="signPro('10')" style="width: 100px">
                       		    <option value="">请选择</option>
                       			<c:if test="${keshilist != null}">
	                            	<c:forEach items="${keshilist}" var="pro">
	                                	<option value="${pro.departmentId}">${pro.departmentName}</option>
	                                </c:forEach>		                                
	                            </c:if>	
                            </select>
                        </div>
                    </div>  
                </div>
                
				
                <!--表格开始-->
                <div class="table">
                    <!--表格操作-->
                    <div class="table-operate ue-clear">
                   	    <a href="javascript:;" class="add">添加行</a>
                    	<a href="javascript:;" class="save" >保存申请</a>
                    </div>
                    <!--表格具体内容-->
                    <div class="table-box">
                        <table>
                            <thead>
                                <tr>
                                    <th>题目内容</th>
                                    <th>单选或多选</th>                                                                 
                                    <th>选项一</th>
                                    <th>选项二</th>
                                    <th>选项三</th> 
                                    <th>选项四</th>                         
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                               <tr class="row" id="option0">
                               		<td><textarea rows="1" cols="30" placeholder="题目内容" name="question" id="tm"></textarea><span class="impInfo">必填</span></td>
                               		<td>
                               			<select name="datiType" id="datiType">
                               				<option value="0">请选择</option>
                               				<option value="2">单选</option>
                               				<option value="1">多选</option>
                               			</select><span class="impInfo">必选</span>
                               		</td>
                               		<td ><textarea rows="1" cols="10" id="" name="question1"></textarea></td>
                               		<td  ><textarea rows="1" cols="10" id="" name="question2"></textarea></td>                              		                    
                               		<td  ><textarea rows="1" cols="10" id="" name="question3"></textarea></td>
                               		<td  ><textarea rows="1" cols="10" id="" name="question4"></textarea></td>                                  		
                               		<td></td>
                               </tr>  
                         </tbody>
                        </table>
                    </div>
                </div><!--表格结束-->
                
            </div>
            </form>
        </div>
        <div id="saper-ft"></div>
    </div>

<script type="text/javascript">
var tbLen = $(".table-box tbody").length;
$(function(){
	$(".add").click(function(){
		tbLen ++;
		console.log(tbLen);
		var str = "";
		str +="<tr id='option"+(tbLen)+"' class='row'>";
		str += "<td><textarea rows=\"1\" cols=\"30\" placeholder=\"题目内容\" name=\"question\" id=\"tm\"></textarea><span class=\"impInfo\">必填</span></td><td><select name=\"datiType\" id=\"datiType"+tbLen+"\"><option value=\"\">请选择</option><option value=\"2\">单选</option><option value=\"1\">多选</option></select><span class=\"impInfo\">必选</span></td><td><textarea rows=\"1\" cols=\"10\" id=\"\" name=\"question1\"></textarea></td><td><textarea rows=\"1\" cols=\"10\" id=\"\" name=\"question2\"></textarea></td><td><textarea rows=\"1\" cols=\"10\" id=\"\" name=\"question3\"></textarea></td><td><textarea rows=\"1\" cols=\"10\" id=\"\" name=\"question4\"></textarea></td>"; 
		str +="<td><a href=\"javascript:;\" onclick=\"del('option"+(tbLen)+"')\">删除</a></td>";
		str +="</tr>";
		console.log(str);
		$(".table-box tbody").append(str);
		$('select').iSelect();
	});
	
	$(".save").click(function(){
		var btn = true;
		 $("input").each(function(){
			 if($(this).val() == ''){
				 btn = false;
				 layer.msg("问卷名称不能为空");
				 return false;
			 }
		 });
		 $("select").each(function(){
			 if($(this).val() == ''){
				 btn = false;
				 layer.msg("必选项不为空");
				 return false;
			 }
		 });
		 $("#tm").each(function(){
			 if($(this).val() == ''){
				 btn = false;
				 layer.msg("题目内容不能为空");
				 return false;
			 }
		 });
		 if(btn){
			 showMask();
			 $.ajax({
	             type: "POST",
	             url:"${ctx}/wenjuan/wenjuanform.do",
	             data:$('#dataForm').serialize(),// 你的formid
	             error: function(request) {
	            	 	layer.alert("网络故障，请稍后再试!");
	             },
	             success: function(data) {
	            	 $("#mask").hide();
	 	           	if(data.status=="true"){
		 	           	layer.alert(data.msg);
		 	           layer.alert(data.msg, function(){
		 	        	  window.location.href="${ctx}/wenjuan/wenjuanList.do";
	           		    });
	 	           	}else{
	 	           		layer.alert(data.msg);
	 	           	}
	             }
	         }); 
	
		 }
	});
	
	
	
	
});
$('select').iSelect();
function del(id){
	$("#"+id).remove();  
}
</script>
</body>
</html>